<template>
  <el-card class="params-factory">
    <tag-content-header>
      <template #title>
        <span class="title-text">客群画像</span>
      </template>
    </tag-content-header>
    <el-form
      ref="editForm"
      :model="editForm"
      :rules="editing ? editFormRules : null"
      label-width="250px"
      label-position="left"
    >
      <p>平台与渠道设置</p>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据平台" prop="DEFAULT_DATA_PLFM">
            <el-select v-model="editForm.DEFAULT_DATA_PLFM" :disabled="!editing">
              <el-option label="---" value="0"></el-option>
              <el-option
                v-for="item in platforms"
                :key="item.plfmId"
                :label="item.plfmNm"
                :value="item.plfmId.toString()"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="画像渠道" prop="DEFAULT_APP_CHANNEL">
            <el-select v-model="editForm.DEFAULT_APP_CHANNEL" multiple filterable :disabled="!editing">
              <el-option
                v-for="dict in $dictList('application_channel')"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key.toString()"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="导出渠道" prop="EXPORT_CHANNEL">
            <el-select v-model="editForm.EXPORT_CHANNEL" multiple filterable :disabled="!editing">
              <el-option
                v-for="dict in $dictList('application_channel')"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key.toString()"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="筛选渠道" prop="DEFAULT_LOGIC_CHANNEL">
            <el-select v-model="editForm.DEFAULT_LOGIC_CHANNEL" multiple filterable :disabled="!editing">
              <el-option
                v-for="dict in $dictList('application_channel')"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key.toString()"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <p>标签集市设置</p>
      <el-row>
        <el-col :span="12">
          <el-form-item label="标签工厂数据平台" prop="DEFAULT_FACTORY_DATA_PLFM">
            <el-select v-model="editForm.DEFAULT_FACTORY_DATA_PLFM" :disabled="!editing">
              <el-option label="---" value="0"></el-option>
              <el-option
                v-for="item in platforms"
                :key="item.plfmId"
                :label="item.plfmNm"
                :value="item.plfmId.toString()"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签集市主表名称" prop="DEFAULT_MAIN_TABLE">
            <el-input
              v-model="editForm.DEFAULT_MAIN_TABLE"
              :readonly="!editing"
              placeholder="请输入标签集市主表名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="平台跑批日期字段" prop="PLFM_BATCH_DATE">
            <el-input
              v-model="editForm.PLFM_BATCH_DATE"
              :readonly="!editing"
              placeholder="请输入平台跑批日期字段"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <p>触达计划标签设置</p>
      <el-row>
        <el-col :span="12">
          <el-form-item label="短信消息标签" prop="PLFM_BATCH_DATE">
            <el-input
              v-model="editForm.PLFM_BATCH_DATE"
              :readonly="!editing"
              placeholder="请输入平台跑批日期字段"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="App消息标签" prop="PLFM_BATCH_DATE">
            <el-input
              v-model="editForm.PLFM_BATCH_DATE"
              :readonly="!editing"
              placeholder="请输入平台跑批日期字段"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" align="right">
          <template v-if="!editing">
            <el-button type="primary" @click="editing = true">修改</el-button>
          </template>
          <template v-else>
            <el-button @click="cancelEdit">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </template>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    let checkPlfm = (rule, value, callback) => {
      if (value === '0') callback(new Error('数据平台不能为空'))
      else callback()
    }
    let checkField = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9a-zA-Z_]+$/.test(value)) callback(new Error('跑批日期字段只能输入英文或数字'))
        else callback()
      } else callback()
    }
    return {
      params: [],
      platforms: [],
      editing: false,
      connecting: false,
      editForm: {
        DEFAULT_DATA_PLFM: '',
        DEFAULT_APP_CHANNEL: [],
        EXPORT_CHANNEL: [],
        DEFAULT_LOGIC_CHANNEL: [],
        DEFAULT_MAIN_TABLE: '',
        PLFM_BATCH_DATE: '',
        DEFAULT_FACTORY_DATA_PLFM: ''
      },
      editFormRules: {
        DEFAULT_DATA_PLFM: [
          { required: true, message: '数据平台不能为空', trigger: 'change' },
          { validator: checkPlfm, trigger: 'change' }
        ],
        DEFAULT_APP_CHANNEL: [{ required: true, message: '画像渠道不能为空', trigger: 'change' }],
        EXPORT_CHANNEL: [{ required: true, message: '导出渠道不能为空', trigger: 'change' }],
        DEFAULT_LOGIC_CHANNEL: [{ required: true, message: '筛选渠道不能为空', trigger: 'change' }],
        DEFAULT_MAIN_TABLE: [{ required: true, message: '标签集市主表名称不能为空', trigger: 'blur' }],
        PLFM_BATCH_DATE: [{ validator: checkField, trigger: 'change' }],
        DEFAULT_FACTORY_DATA_PLFM: [
          { required: true, message: '数据平台不能为空', trigger: 'change' },
          { validator: checkPlfm, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getPlatform()
  },
  watch: {
    params(value) {
      this.reset(value)
    }
  },
  methods: {
    getParams(moduleCode) {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysParameter/module'),
        method: 'get',
        params: this.$ajax.setParams({
          moduleCode
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.params = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getPlatform() {
      this.$ajax({
        url: this.$ajax.setUrl('mta/mtaPlatform/getAll'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.platforms = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    reset(data) {
      data.forEach(v => {
        Object.keys(this.editForm).forEach(key => {
          if (key === v.paramCode)
            this.editForm[key] =
              key.indexOf('CHANNEL') >= 0 ? (v.paramValue.length ? v.paramValue.split(',') : []) : v.paramValue
        })
      })
    },
    cancelEdit() {
      this.reset(this.params)
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
      this.editing = false
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = []
          Object.keys(this.editForm).forEach(key => {
            this.params.forEach(v => {
              if (key === v.paramCode)
                params.push({
                  moduleCode: v.moduleCode,
                  paramCmnt: v.paramCmnt,
                  paramCode: v.paramCode,
                  paramDesc: v.paramDesc,
                  paramName: v.paramName,
                  paramValue:
                    key.indexOf('CHANNEL') >= 0 ? this.editForm[v.paramCode].join(',') : this.editForm[v.paramCode]
                })
            })
          })
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysParameter'),
            method: 'put',
            data: this.$ajax.setData(params, false, 'json')
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.editing = false
              this.getParams(this.$route.query.tabName)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.params-factory {
  overflow-x: hidden;
  .el-button--primary {
    background-color: #4d81ea;
    border-color: #4d81ea;
  }
  .el-tag.el-tag--info,
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #606266;
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: #4e5aa3;
  }
  p {
    padding: 5px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid $border-color;
    font-weight: bold;
  }
}
</style>
